<template>
  <h2>computed的改写</h2>
  <p>count: {{ count }}</p>
  <p>doubleCount: {{ doubleCount }}</p>

  <p>oddList: {{ oddList }}</p>
</template>

<script>
// 计算属性需要从vue里面解构computed(方法)
// 里面传入一个函数，函数需要return
// 有一个返回值，就是return的内容
import { ref, computed } from "vue";

export default {
  setup() {
    const count = ref(10);
    const doubleCount = computed(() => {
      return count.value * 2;
    });

    const list = ref([1, 2, 3, 4, 5, 6, 7]);
    const oddList = computed(() => {
      return list.value.filter((item) => item % 2);
    });

    return {
      count,
      doubleCount,
      oddList,
    };
  },
};
</script>
